<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
    name: "AddParticleLayer.component",
    components: {Maptalks},
    setup() {

        let mapOnLoadCB = (map) => {
            map.setZoom(14)

            let particleLayer = new maptalks.VectorLayer(MapLayerConst.MAP_PARTICLE_LAYER).addTo(map)
            let markerLayer = new maptalks.VectorLayer(MapLayerConst.MAP_MARKER_LAYER).addTo(map)

            // An animated particle circle
            let particles = new maptalks.ParticleLayer(particleLayer, {
                "forceRenderOnMoving": true
            });

            let center = map.getCenter();

            // circle"s radius in meters
            let radius = 1000;

            particles.getParticles = function (t) {

                let point = map.coordinateToContainerPoint(center);

                // particle"s angle at current time
                let angle = (t / 16 % 360) * Math.PI / 180;

                // convert distance in meter to pixel length
                let pxLen = map.distanceToPixel(radius, radius);
                let r = pxLen.width;

                // caculate pixel offset from circle"s center
                let x = r * Math.cos(angle),
                    y = r * Math.sin(angle);

                return [
                    {
                        point: point.add(x, y),
                        r: 4,
                        color: "rgb(239,8,8)"
                    }
                ];
            };

            map.addLayer(particles);

            // 圆心
            new maptalks.Marker(center, {
                symbol: {
                    markerType: "cross",
                    markerWidth: 10,
                    markerHeight: 10,
                    markerLineWidth: 2
                }
            }).addTo(markerLayer);

            // 圆轨道
            new maptalks.Circle(center, radius, {
                symbol: {
                    lineColor: "transparent",
                    lineWidth: 6,
                    lineOpacity: 0.2,
                    polygonOpacity: 0
                }
            }).addTo(markerLayer);
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>
